<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    v-bind="$attrs"
    @update:model-value="$emit('update:modelValue', $event)"
    @close="handleClose"
  >
    <div class="custom-dialog__content">
      <slot></slot>
    </div>

    <template #footer v-if="showFooter">
      <slot name="footer">
        <el-button @click="handleCancel">{{ cancelText }}</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="confirmLoading">
          {{ confirmText }}
        </el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElDialog, ElButton } from 'element-plus'

// 类型定义
type DialogWidth = number | string
type DialogPlacement = 'ttr' | 'rtl' | 'ltr' | 'ttb' | 'btt' | 'center'

// 对话框配置
interface Props {
  modelValue: boolean
  title?: string
  width?: DialogWidth
  fullscreen?: boolean
  top?: string
  showFooter?: boolean
  cancelText?: string
  confirmText?: string
  confirmLoading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  width: '500px',
  fullscreen: false,
  top: '15vh',
  showFooter: true,
  cancelText: '取消',
  confirmText: '确定',
  confirmLoading: false,
})

  const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'confirm'): void
    (e: 'cancel'): void
    (e: 'close'): void
  }>()

  const handleClose = () => {
    emit('update:modelValue', false)
    emit('close')
  }

  const handleCancel = () => {
    emit('update:modelValue', false)
    emit('cancel')
  }

  const handleConfirm = () => {
    emit('confirm')
  }
</script>

<style scoped>
  .custom-dialog__content {
    max-height: 60vh;
    overflow-y: auto;
  }
</style>
